<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/shoppingCar.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2790765_pqm82v7ytg.css">
</head>

<body>


    <!-- 购物车 -->
    <div class="container w">
        <div class="cart-main">
            <div class="cart-wrap">
                <div class="list-header">
                    <div class="col col-check">
                        <label>
                            <input type="checkbox" class="check-all">&emsp;全选
                        </label>
                    </div>
                    <div class="col col-img"></div>
                    <div class="col col-detail">商品名称</div>
                    <div class="col col-price">单价</div>
                    <div class="col col-count">数量</div>
                    <div class="col col-subtotal">小计</div>
                    <div class="col col-operate">操作</div>
                </div>
                <div class="list-body">
                    <!-- <div class="list-item">
                        <div class="col col-check">
                            <label>
                                <input type="checkbox" class="check-one" onclick="checkOne()">
                            </label>
                        </div>
                        <div class="col col-img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1632713426.30988142.jpg?thumb=1&w=100&h=100"
                                alt="">
                        </div>
                        <div class="col col-detail">
                            Xiaomi Civi 8GB+128GB 闪闪黑</div>
                        <div class="col col-price">2599元</div>
                        <div class="col col-count">
                            <div class="countBox">
                                <span class="reduce"></span>
                                <input type="text" class="countSpan">
                                <span class="add">+</span>
                            </div>
                        </div>
                        <div class="col col-subtotal">2599元</div>
                        <div class="col col-operate"><i class="iconfont icon-close delete"></i></div>
                    </div> -->

                </div>
                <div class="list-footer">
                    <div class="col col-continue"><a href="javascript:;" class="clear">清空购物车</a></div>
                    <span class="col col-sep">|</span>
                    <div class="col col-center">
                        <div class="numTips">
                            共 <span class="totalNum"></span> 件商品，已选择 <span class="selectedNum">0</span> 件
                        </div>
                        <div class="priceTips">
                            合计：<span class="selectedTotal">0</span>元
                        </div>
                    </div>
                    <div class="col col-total">
                        <a href="">去结算</a>
                        <div class="totalTips">
                            请勾选需要结算的商品
                            <i class="iconfont icon-xiasanjiao-copy arrow"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <script>

        var cartList = [
            {
                id: 0,
                name: 'Xiaomi Civi 8GB+128GB 闪闪黑',
                price: '2599元',
                num: 1,
                src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1632713426.30988142.jpg?thumb=1&w=100&h=100'
            },
            {
                id: 1,
                name: 'Xiaomi Civi 8GB+128GB 闪闪红',
                price: '2099元',
                num: 2,
                src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1632713426.30988142.jpg?thumb=1&w=100&h=100'
            },
            {
                id: 2,
                name: 'Xiaomi Civi 8GB+128GB 闪闪红哈哈',
                price: '1099元',
                num: 1,
                src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1632713426.30988142.jpg?thumb=1&w=100&h=100'
            },
        ]

        // 小计  NaN?   元   parseFloat()    replace('元' , '')   substring()   substr()


        // 全选  --  点击全选，下面的单选都勾选  .checked = true / false

        var oListBody = document.querySelector('.list-body');

        var oAll = document.querySelector('.check-all');

        var oTotalNum = document.querySelector('.totalNum');

        var oselectedNum = document.querySelector('.selectedNum');

        var priceAll = document.querySelector('.selectedTotal');



        // 渲染购物车列表
        render();

        // 单选一定是在渲染列表以后才能获取
        var oOnes = document.querySelectorAll('.check-one');


        // 绑定事件  -- 事件委托
        var oCart = document.querySelector('.cart-wrap');
        oCart.onclick = function (e) {

            // 全选
            if (e.target.className === 'check-all') {
                for (var i = 0; i < oOnes.length; i++) {
                    oOnes[i].checked = e.target.checked;
                }
                return;
            }

            // 反选
            if (e.target.className === 'check-one') {
                // 统计

                return;
            }


            // 数量加
            if (e.target.className === 'add') {
                e.target.previousElementSibling.value++;   // 1 数量加
                // 2 小计也跟着变   数量 * 单价
                // 3 自定义属性 num 也要跟着改变    --- 为了做输入框事件的
                e.target.previousElementSibling.setAttribute('num', e.target.previousElementSibling.value);
            }


        }




        // 表单事件  --- 输入框事件
        var oInps = document.querySelectorAll('.countSpan');

        // 循环绑定事件
        for (var i = 0; i < oInps.length; i++) {
            oInps[i].onchange = function () {
                // console.log(111);
                // 判断输入是否合理  --- 正整数
                if (this.value >= 1 && this.value % 1 === 0) {
                    // 小计
                    this.parentElement.parentElement.nextElementSibling.innerHTML = this.value * this.parentElement.parentElement.previousElementSibling.innerHTML.replace('元', '') + '元';
                }
                else {
                    alert('数量必须是正整数');
                    // 在初始化的时候，给标签添加自定义属性 num  , 回到之前的状态
                    var num = this.getAttribute('num');
                    this.value = num;
                }


            }
        }


        for (var i = 0; i < oInps.length; i++) {
            oInps[i].onkeyup = function (e) {
                if (e.key === 'Enter') {  // e.keyCode === 13
                    this.blur();    // 主动让这个输入框失去焦点
                }
            }
        }








        // 渲染购物车列表
        function render() {
            var html = '';
            for (var i = 0; i < cartList.length; i++) {
                html += `
                <div class="list-item">
                        <div class="col col-check">
                            <label>
                                <input type="checkbox" class="check-one">
                            </label>
                        </div>
                        <div class="col col-img">
                            <img src="${cartList[i].src}"
                                alt="">
                        </div>
                        <div class="col col-detail">
                            ${cartList[i].name}</div>
                        <div class="col col-price">${cartList[i].price}</div>
                        <div class="col col-count">
                            <div class="countBox">
                                <span class="reduce">${cartList[i].num > 1 ? '-' : ''}</span>
                                <input num="${cartList[i].num}" type="text" class="countSpan" value="${cartList[i].num}">
                                <span class="add">+</span>
                            </div>
                        </div>
                        <div class="col col-subtotal">${cartList[i].num * cartList[i].price.replace('元', '')}元</div>
                        <div class="col col-operate"><i class="iconfont icon-close delete"></i></div>
                    </div>
                `
            };

            // 
            oListBody.innerHTML = html;
        }








    </script>



</body>

</html>